<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>{{query}} - {{appname}}</title>
<style type="text/css">
.appChartLabel {
text-decoration:underline;
cursor:hand;
color:#336699;
}
</style>
{% if data %}
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("visualization", "1",{"packages": [
"AreaChart",
"BarChart",
"ColumnChart",
"LineChart",
"PieChart",
"Table"]});
google.setOnLoadCallback(draw{{charttype}});	

var data = null;
var area = null;
var bar = null;
var column = null;
var line = null;
var pie = null;
var table = null;
var curr = "{{charttype}}";

function draw(charttype) {
	if ("AreaChart" == charttype) drawAreaChart();
	else if ("BarChart" == charttype) drawBarChart();
	else if ("ColumnChart" == charttype) drawColumnChart();
	else if ("LineChart" == charttype) drawLineChart();
	else if ("PieChart" == charttype) drawPieChart();
	else if ("Table" == charttype) drawTable();
}

function getData() {
	if (null == data)
		data = new google.visualization.DataTable({{data}}, 0.5);
}

function switchChart(charttype) {
	if ("" != curr) {
		document.getElementById(curr).style.display = "none";
		document.getElementById(curr+"Label").style.fontWeight = "normal";
	}
	curr = charttype;
	document.getElementById(curr).style.display = "";
	document.getElementById(curr).style.width = "100%";
	document.getElementById(curr).style.height = document.height*0.8;
	document.getElementById(curr+"Label").style.fontWeight = "bold";
}

function drawAreaChart() {
	getData();
	switchChart("AreaChart")
	if (null == area)
		area = new google.visualization.AreaChart(document.getElementById("AreaChart"));
	area.draw(data, {legend: "bottom"});
}
function drawBarChart() {
	getData();
	switchChart("BarChart")
	if (null == bar)
		bar = new google.visualization.BarChart(document.getElementById("BarChart"));
	bar.draw(data, {legend: "bottom"});
}
function drawColumnChart() {
	getData();
	switchChart("ColumnChart")
	if (null == column)
		column = new google.visualization.ColumnChart(document.getElementById("ColumnChart"));
	column.draw(data, {legend: "bottom"});
}
function drawLineChart() {
	getData();
	switchChart("LineChart")
	if (null == line)
		line = new google.visualization.LineChart(document.getElementById("LineChart"));
	line.draw(data, {legend: "bottom"});
}
function drawPieChart() {
	getData();
	switchChart("PieChart")
	if (null == pie)
		pie = new google.visualization.PieChart(document.getElementById("PieChart"));
	pie.draw(data, {legend: "bottom"});
}
function drawTable() {
	getData();
	switchChart("Table")
	if (null == table)
		table = new google.visualization.Table(document.getElementById("Table"));
	table.draw(data);
}
</script>
{% endif %}
</head>
<body>
{{pagehead}}
<table style="width:100%;" cellpadding=4 border="0">
<tr>
<td style="border-top: solid 1px #336699;background:#F0F5FA;">
{% if data %}
<span id="AreaChartLabel" class="appChartLabel" onclick=draw("AreaChart")>面积图</span>
<span id="BarChartLabel" class="appChartLabel" onclick=draw("BarChart")>条形图</span>
<span id="ColumnChartLabel" class="appChartLabel" onclick=draw("ColumnChart")>柱形图</span>
<span id="LineChartLabel" class="appChartLabel" onclick=draw("LineChart")>折线图</span>
<span id="PieChartLabel" class="appChartLabel" onclick=draw("PieChart")>饼图</span>
<span id="TableLabel" class="appChartLabel" onclick=draw("Table")>表格</span>
{% endif %}
</td>
</tr>
<tr>
<td colspan=2 style="height:10px">
</td>
</tr>
<tr>
<td valign=top style="text-aligh:center">
{% if data %}
<div id="AreaChart" style="display:none;"></div>
<div id="BarChart" style="display:none;"></div>
<div id="ColumnChart" style="display:none;"></div>
<div id="LineChart" style="display:none;"></div>
<div id="PieChart" style="display:none;"></div>
<div id="Table" style="display:none;"></div>
{% else %}
找不到和您的查询 "{{query}}" 相符的数据，您可以重新尝试。
{% endif %}
</td>
</tr>
</table>
{{googleanalytics}}
</body>
</html>